<template>
	<view class="page">
		<view class="back-block" :style="{'marginTop':statusBarHeight+'px'}">
			<label class="iconfont icon115fangxiang_xiangzuo" @click="backStep"></label>
			<text class="step2-title" v-if="step == 2">安全验证</text>
		</view>
		
		<view class="step1-block" v-if="step == 1">
			<view class="big-title">
				用手机号码注册
			</view>
			<view class="input-block">
				<view class="input-select">
					+86<label class="iconfont iconsanjiaoxing1"></label>
				</view>
				<input type="number" 
				maxlength="11"
				focus="true"
				value="" class="phone-input" v-model="user.phone" />
			</view>
			
			<view class="agreement" >
				<radio style="transform:scale(0.6)" color="#10D4FF" class="radio-sigle" 
				:checked="user.aggrement"
				@click="_self.user.aggrement = !_self.user.aggrement">
				</radio>
				<text class="agreement-text">
					已阅读并同意
					<navigator url="../addAndRegister/addAndRegister" 
					open-type="navigate" 
					animation-type="pop-out" animation-duration="300"
					>服务协议</navigator>
					和
					<navigator url="../active/active">Py隐私指引</navigator>
				</text>
			</view>
			
			<view class="next-bottn">
				<button type="default" :disabled="!isComplete" @click="nextStep()">下一步</button>
			</view>
		</view>
		
		<view class="step2-page" v-if="step==2">
			<sliding-image-verification
			bgImg="../../static/verify.jpeg"
			:allowError="2"
			:successNumber="74"
			:canvasH="12"
			@success="nextStep()"
			@refresh="refresh()"
			></sliding-image-verification>
			<!-- <image src="../../static/headPic.jpg" mode=""></image>
			<!-- <verification></verification> -->
		</view>
		
		<!-- 输入短信验证码 -->
		<view class="step3-page" v-if="step == 3">
			<view class="page3-title">请输入短信验证码</view>
			<view class="page3-description" style="margin-bottom: 20rpx;">已向 +86 {{user.phone}} 发送验证码</view>
			<!-- <view class="verification-code-input">
				<input v-for="i in 6"
				type="number" 
				:style="verificationComplete[i-1] ? 'border: 1px solid #06D2FF': '' "
				:disabled="!((i-1) == inputDoing)"
				maxlength="1"
				:focus="verificationFocus[i-1]"
				@input="codeInput($event,i-1)"
				v-model="verificationCode[i-1]"
				/>
			</view> -->
			<verification-codeInput
			ref="codeInput" 
			@verificationCode="nextStep()" 
			codeType="block" 
			errorType="errorType" 
			:blockNum="6">
			</verification-codeInput>
			<view class="send-count-down" style="margin-top: 20rpx;">
				重新发送{{codeTime == 0 ? '' : '('+codeTime+'s后)'}}
			</view>
		</view>
		
		<!-- 输入昵称和密码 -->
		<view class="step4-page" v-if="step == 4">
			<view class="page4-title">请输入昵称和密码</view>
			<view class="nickName-input">
				<input
				type="text" 
				maxlength="12"
				focus="true"
				v-model="user.nickName"
				placeholder="请输入昵称"
				/>
			</view>
			<view class="password-input">
				<input
				password=""
				maxlength="20"
				v-model="user.password"
				placeholder="请输入密码"
				/>
			</view>
			<view class="register-complete">
				<button type="default" @click="register">完成注册</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import utils from "../../common/util.js"
	var _self
	
	export default {
		data() {
			return {
				isComplete: false, // 当前页面信息是否填写完整
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				step: 1, // 注册进度
				user:{
					// phone: "15279576228",
					phone: "",
					aggrement: false,
					nickName:"",
					password: ""
				},
				saolei: {},
				codeTime: 10
			}
		},
		onShow() {
			//打开webSocket
			// if(!_self.$store.state.start_timeId){
			// 	utils.connectSocketInit()
			// }
		},
		onLoad() {
			_self = this
			setInterval(function(){
				var flag = /^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/.test(_self.user.phone)
				if(_self.step == 1 && flag && _self.user.aggrement){
					_self.isComplete = true
				}else{
					_self.isComplete = false
				}
			},500)
		},
		methods: {
			// 用户注册
			register(){
				uni.request({
					url: utils.basicUrl+'/chatUser/register',
					method: 'POST',
					data:{
						..._self.user
					},
					success: function(res) {
						if(res.data.code === 20000){
							console.log(res.data)
							// uni.showToast({
							// 	icon:'none',
							// 	title:'注册成功'
							// })
							// 跳转登录
							uni.navigateTo({
								url:'../addAndRegister/addAndRegister?username='+res.data.data.username,
								animationType:'slide-in-bottom',
								animationDuration:300
							})
						}else{
							_self.utils.requestFail(res)
							// uni.showModal({
							// 	content: JSON.stringify(res),
							// 	showCancel: false
							// });
						}
					},
					fail: () => {
						uni.showModal({
							content: "网络错误！",
							showCancel: false
						});
					},
					complete() {
						// 停止当前页面下拉刷新
						// uni.hideLoading()
					}
				});
			},
			// 上一步
			backStep(){
				if(_self.step > 1 ){
					_self.step --
				}else{
					uni.navigateBack({
						delta:1
					})
				}
			},
			// 下一步
			nextStep(){
				if(_self.step < 4){
					_self.step ++
				}else{
					return
				}
				console.log(_self.step)
			},
			refresh(){
				uni.showToast({
					icon:"none",
					title:"验证失败"
				})
			}
		}
	}
</script>

<style>
	@import url("register.css");
</style>
